<template>
  <div class="uploadimg">
    <el-upload
      class="avatar-uploader"
      :action="baseUrl + '/question/upload'"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
    >
      <img
        v-if="value"
        v-imgerror="defaultImg"
        :src="value"
        class="avatar"
        @click.stop="isShow1"
      >
      <i class="el-icon-plus avatar-uploader-icon" />
    </el-upload>
    <!-- 删除按钮 -->
    <div v-if="delbtn" class="del" @click.prevent="del">x</div>
    <!-- 预览 -->
    <el-dialog title="图片预览" width="600px" :visible.sync="isShow">
      <img :src="value" alt="" style="width: 100%">
    </el-dialog>
    <!-- 进度条 -->
    <transition name="fade">
      <el-progress v-if="loading" :percentage="percentage" />
    </transition>
  </div>
</template>

<script>
export default {
  name: 'Uploadimg',
  props: {
    value: {
      type: String,
      defult: ''
    }
  },
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      defaultImg: require('@/assets/common/head.jpg'),
      loading: false,
      percentage: 0,
      isShow: false,
      delbtn: false
    }
  },
  methods: {
    handleAvatarSuccess(res) {
      this.loading = true
      this.percentage = 0
      setTimeout(() => {
        this.loading = false
        this.$message.success('上传成功')
      }, 1000)

      this.percentage = 100
      this.$emit('input', this.baseUrl + '/' + res.data.url)
      this.delbtn = true
    },
    beforeAvatarUpload(file) {
      const isIMG =
        file.type === 'image/jpeg' ||
        file.type === 'image/png' ||
        file.type === 'image/gif'
      const isLt8M = file.size / 1024 / 1024 < 8

      if (!isIMG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt8M) {
        this.$message.error('上传头像图片大小不能超过 8MB!')
      }
      return isIMG && isLt8M
    },
    del() {
      this.$emit('input', '')
      this.delbtn = false
    },
    isShow1() {
      this.isShow = true
    }
  }
}
</script>
<style lang="scss" scoped>
.uploadimg {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  position: relative;
  width: 178px;
  &:hover {
    .del {
      display: block;
      font-size: 15px;
      z-index: 10000;
    }
  }
  .del {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    display: none;
  }
  .fade-enter-active,
  .fade-leave-active {
    transition: all 0.5s;
  }
  .fade-enter {
    opacity: 0;
    // transform: translateY(-100px);
  }
  .fade-leave-to {
    opacity: 0;
    // transform: translateY(100px);
  }

  .avatar-uploader .el-upload {
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    position: absolute;
    top: 0;
    right: 0;
    width: 178px;
    height: 178px;
    display: block;
  }
}
</style>
